<template>
  <div class="px-[15px]">
    <div class="border-b border-[#ECECEC] py-[15px] flex items-center w-full">
      <div class="text-[14px] min-w-[120px]">纳税人名称</div>
      <div class="ml-[10px] flex justify-between items-center w-full">
        <div class="text-[14px]">
          {{ fpInfo?.invoice_name }}
        </div>
      </div>
    </div>
    <div class="border-b border-[#ECECEC] py-[15px] flex items-center w-full">
      <div class="text-[14px] min-w-[120px]">纳税人识别号</div>
      <div class="ml-[10px] flex justify-between items-center w-full">
        <div class="text-[14px]">
          {{ fpInfo?.invoice_no }}
        </div>
      </div>
    </div>
    <div class="border-b border-[#ECECEC] py-[15px] flex items-center w-full">
      <div class="text-[14px] min-w-[120px]">税务登记号码</div>
      <div class="ml-[10px] flex justify-between items-center w-full">
        <div class="text-[14px]">
          {{ fpInfo?.invoice_mobile }}
        </div>
      </div>
    </div>
    <div class="border-b border-[#ECECEC] py-[15px] flex items-center w-full">
      <div class="text-[14px] min-w-[120px]">税务开户银行名称</div>
      <div class="ml-[10px] flex justify-between items-center w-full">
        <div class="text-[14px]">
          {{ fpInfo?.invoice_bank }}
        </div>
      </div>
    </div>
    <div class="border-b border-[#ECECEC] py-[15px] flex items-center w-full">
      <div class="text-[14px] min-w-[120px]">税务开户银行账号</div>
      <div class="ml-[10px] flex justify-between items-center w-full">
        <div class="text-[14px]">
          {{ fpInfo?.invoice_bank_no }}
        </div>
      </div>
    </div>
    <div class="border-b border-[#ECECEC] py-[15px] flex items-center w-full">
      <div class="text-[14px] min-w-[120px]">税务登记地址</div>
      <div class="ml-[10px] flex justify-between items-center w-full">
        <div class="text-[14px]">
          {{ fpInfo?.invoice_address }}
        </div>
      </div>
    </div>
    <div class="border-b border-[#ECECEC] py-[15px] flex items-center w-full">
      <div class="text-[14px] min-w-[120px]">姓名</div>
      <div class="ml-[10px] flex justify-between items-center w-full">
        <div class="text-[14px]">
          {{ fpInfo?.name }}
        </div>
      </div>
    </div>
    <div class="border-b border-[#ECECEC] py-[15px] flex items-center w-full">
      <div class="text-[14px] min-w-[120px]">手机号</div>
      <div class="ml-[10px] flex justify-between items-center w-full">
        <div class="text-[14px]">
          {{ fpInfo?.mobile }}
        </div>
      </div>
    </div>
    <div class="border-b border-[#ECECEC] py-[15px] flex items-center w-full">
      <div class="text-[14px] min-w-[120px]">收件详细地址</div>
      <div class="ml-[10px] flex justify-between items-center w-full">
        <div class="text-[14px]">
          {{ fpInfo?.address }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
defineProps({
  fpInfo: { type: Object },
});
</script>
<style scoped lang="scss"></style>
